

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='animation'><code class="symbol">animation</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animations to be used for opening/closing the popup. Setting to false will turn of the animation.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='close'><code class="symbol">close</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animation to be used for closing of the popup.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//dropdownlist initialization
 &amp;lt;script&amp;gt;
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         animation: {
            close: {
                effects: "fadeOut",
                duration: 300,
                hide: true
                show: false
            }
         }
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='open'><code class="symbol">open</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc"> Animation to be used for opening of the popup.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//dropdownlist initialization
 &amp;lt;script&amp;gt;
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         animation: {
            open: {
                effects: "fadeIn",
                duration: 300,
                show: true
            }
         }
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='autoBind'><code class="symbol">autoBind</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether to bind the widget on initialization.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    autoBind: false
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataSource'><code class="symbol">dataSource</code></a>: <span class="type">kendo.data.DataSource | Object</span></div><div class="detailBody"><div class="desc">Instance of DataSource or the data that the DropDownList will be bound to.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// bind to local data
var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    dataSource: {
        transport: {
            read: "titles.json"
        }
    },
    dataTextField: "Title",
    dataValueField: "Id"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataTextField'><code class="symbol">dataTextField</code></a>: <span class="type">String</span><span class="defaultValue">(default: "")</span></div><div class="detailBody"><div class="desc"> Sets the field of the data item that provides the text content of the list items.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataValueField'><code class="symbol">dataValueField</code></a>: <span class="type">String</span><span class="defaultValue">(default: "")</span></div><div class="detailBody"><div class="desc"> Sets the field of the data item that provides the value content of the list items.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='delay'><code class="symbol">delay</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 500)</span></div><div class="detailBody"><div class="desc"> Specifies the delay in ms before the search text typed by the end user is cleared.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    delay: 1000 // wait 1 second before clearing the user input
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='enable'><code class="symbol">enable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether the DropDownList should be initially enabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    enabled: false // dropdown list will not be enabled
});</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// disable the dropdown
dropdownlist.enable(false);</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='height'><code class="symbol">height</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 200)</span></div><div class="detailBody"><div class="desc"> Define the height of the drop-down list in pixels.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    height: 400
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='ignoreCase'><code class="symbol">ignoreCase</code></a>: <span class="type">String</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Controls whether the search should be case sensitive.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    ignoreCase: false //now search will be case sensitive
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='index'><code class="symbol">index</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 0)</span></div><div class="detailBody"><div class="desc"> Defines the initial selected item.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    index: 1 // selects the second item in the dropdown list
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='optionLabel'><code class="symbol">optionLabel</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Define the text of the default empty item.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#dropdownlist").kendoDropDownList({
    optionLabel: "Select An Option"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">Function</span></div><div class="detailBody"><div class="desc">Template to be used for rendering the items in the list.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//template
&amp;lt;script id="template" type="text/x-kendo-tmpl"&amp;gt;
      # if (data.BoxArt.SmallUrl) { #
          &amp;lt;img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" /&amp;gt;Title:${ data.Name }, Year: ${ data.Name }
      # } else { #
          &amp;lt;img alt="${ data.Name }" /&amp;gt;Title:${ data.Name }, Year: ${ data.Name }
      # } #
 &amp;lt;/script&amp;gt;

 //dropdownlist initialization
 &amp;lt;script&amp;gt;
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         dataTextField: "Name",
         dataValueField: "Id",
         template: kendo.template($("#template").html())
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div>

